<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>TA的主页</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/waterfall.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            outline:none;
        }
        .myaction{
          width: 16px;
          height: 16px;
          vertical-align: middle;
        }


        [v-cloak]{
            display: none!important;
        }
        .pubu{
            width: 98%;
            margin: 0 auto;
        }
        .yg .yg_img{
            width:100%;
            border-radius: 6px 6px 0 0;
        }

        .pubu .yg {
            column-count:3;
        }
        .yg li{
            -moz-page-break-inside:avoid;
            -webkit-column-break-inside:avoid;
            break-inside:avoid;
            margin-bottom: 10px;
            background: #fff;
            border-radius: 8px;
            padding-bottom: 10px;
            box-shadow: 0 0 5px rgba(0,0,0,.1);
            border-radius: 6px 6px 6px 6px;
        }


    </style>
</head>

<body style="background: #f7f4f2;">
<div id="app"  v-cloak>
    <div style="background-color: #fff;"  class="home-people">
            <!-- <img class="home-jiantou"  v-back.tapmode v-src="'../../image/back_heise-1.png'" /> -->
            <div class="dynamic" v-show="index_state==1">
                <!--<div class="dynamic-card" v-for="(list, index) in recomm_list">-->
                    <!--<img class="dynamic-card-img" :src="list.cover" v-myclick="[list.id,opendetail]">-->
                    <!--<div class="dynamic-card-content">-->
                        <!--<span class="dynamic-card-content-title">{{list.title}}</span>-->
                        <!--<div class="dynamic-name">-->
                            <!--<img style="width: 21px;border-radius: 50%;vertical-align: middle" :src="list.member_avatar" />-->
                            <!--<span style="font-size: 12px;color: #999;">{{list.member_nickname}}</span>-->
                            <!--<div style="float: right">-->
                                <!--<img class="myaction" v-show="list.praise_flag==0" v-src="'../../image/huise-xin.png'" v-myclick="[index,takeaction]">-->
                                <!--<img class="myaction" v-show="list.praise_flag==1" v-src="'../../image/hongse-xin.png'" v-myclick="[index,takeaction]">-->
                                <!--<span style="vertical-align: middle;line-height: 20px;font-size: 12px;color: #999">{{list.praise_number}}</span>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

                    <!--<div class="container-water-fall">-->
                        <!--<waterfall :col=2   :data="data"  @loadmore="loadmore" :lazyDistance="50"  >-->
                            <!--<div class="cell-item" v-for="(item,index) in data" :key="index"  >-->
                                <!--<img v-if="item.img"  :src="item.img" alt="加载错误"  />-->
                                <!--<div class="item-body">-->
                                    <!--<div class="item-desc">{{item.title}}</div>-->
                                    <!--<div class="item-footer">-->
                                        <!--<div v-if="item.avatar" class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div>-->
                                        <!--<div class="name">{{item.user}}</div>-->
                                        <!--<div class="like" :class="item.liked?'active':''" >-->
                                            <!--<i></i>-->
                                            <!--<div class="like-total">{{item.like}}</div>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</waterfall>-->
                    <!--</div>-->

                <div class="pubu" >
                    <ul class="yg yg_l" style=" column-count:2;column-gap:5px;">
                        <li v-for="(list,index) in recomm_list">
                            <div class="item_div">
                                <img class="yg_img" :src="list.cover" alt="" v-myclick="[list.id,opendetail]">
                                <div class="dynamic-card-cotent">
                                    <span class="dynamic-card-content-title">{{list.title}}</span>
                                    <div class="dynamic-name">
                                        <img style="width: 21px;border-radius: 50%;vertical-align: middle" :src="list.member_avatar" />
                                        <span style="font-size: 12px;color: #999;">{{list.member_nickname}}</span>
                                        <div style="float: right">
                                            <img class="myaction" v-show="list.praise_flag==0" v-src="'../../image/huise-xin.png'" v-myclick="[index,takeaction]">
                                            <img class="myaction" v-show="list.praise_flag==1" v-src="'../../image/hongse-xin.png'" v-myclick="[index,takeaction]">
                                            <span style="vertical-align: middle;line-height: 20px;font-size: 12px;color: #999">{{list.praise_number}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <!--<limit-load style="margin:10px 0;"-->
                            <!--count-per-page="15"-->
                            <!--:arr="recomm_list" :url="url"-->
                            <!--ret-attr="list"-->
                <!--&gt;-->
                <!--</limit-load>-->
            </div>
            <div class="dynamic" v-show="index_state==2">
                <!--<div class="dynamic-card" v-for="(list, index) in concern_list">-->
                    <!--<img class="dynamic-card-img" :src="list.cover" v-myclick="[list.id,opendetail]">-->
                    <!--<div class="dynamic-card-content">-->
                        <!--<span class="dynamic-card-content-title">{{list.title}}</span>-->
                        <!--<div class="dynamic-name">-->
                            <!--<img style="width: 21px;border-radius: 50%;vertical-align: middle" :src="list.member_avatar" />-->
                            <!--<span style="font-size: 12px;color: #999;">{{list.member_nickname}}</span>-->
                            <!--<div style="float: right">-->
                              <!--<img class="myaction" v-show="list.praise_flag==0" v-src="'../../image/huise-xin.png'" v-myclick="[index,takeaction]">-->
                              <!--<img class="myaction" v-show="list.praise_flag==1" v-src="'../../image/hongse-xin.png'" v-myclick="[index,takeaction]">-->
                                <!--<span style="vertical-align: middle;line-height: 20px;font-size: 12px;color: #999">{{list.praise_number}}</span>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

                <div class="pubu" >
                    <ul class="yg yg_l" style=" column-count:2;column-gap:5px;">
                        <li v-for="(list, index) in concern_list">
                            <div class="item_div">
                                <img class="yg_img" :src="list.cover" alt="" v-myclick="[list.id,opendetail]">
                                <div class="dynamic-card-cotent">
                                    <span class="dynamic-card-content-title">{{list.title}}</span>
                                    <div class="dynamic-name">
                                        <img style="width: 21px;border-radius: 50%;vertical-align: middle" :src="list.member_avatar" />
                                        <span style="font-size: 12px;color: #999;">{{list.member_nickname}}</span>
                                        <div style="float: right">
                                            <img class="myaction" v-show="list.praise_flag==0" v-src="'../../image/huise-xin.png'" v-myclick="[index,takeaction]">
                                            <img class="myaction" v-show="list.praise_flag==1" v-src="'../../image/hongse-xin.png'" v-myclick="[index,takeaction]">
                                            <span style="vertical-align: middle;line-height: 20px;font-size: 12px;color: #999">{{list.praise_number}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>

    </div>
    <transition name="fade">
        <div class="telescopic_box" v-if="telescopic"  v-enter-to>
            <img v-src="'../../image/video_slices.png'" v-myclick="video"/>
            <div>直播</div>
            <img v-src="'../../image/sowing_slices.png'" v-myclick="sowing"/>
            <div>发视屏</div>
            <img v-src="'../../image/image_text.png'" v-myclick="show_pick"/>
            <div>发图文</div>
        </div>
    </transition>
    <!--v-myclick="show_pick"-->
    <img v-src="'../../image/add.png'" style="position:fixed;bottom:30px;right:30px;width:40px" v-myclick="telescopic_click">
    <img v-src="'../../image/close_home_slices.png'" style="position:fixed;bottom:30px;right:30px;width:40px" v-if="telescopic_img" v-myclick="telescopic_click">
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>

<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
    var vm,
        wx,
        recomm_list,
        concern_list;
    apiready = function () {
        setBSImg();
        wx = api.require('wx');
        showProgress();
        var data = {
            member_id: getPrefs('member_id'),
            page_no: 1,
            page_size: 30,

        };
        var callback = function (ret) {
          recomm_list = ret.content;
          initApp();

        };
        pinet.post(APIURL+'/app/dynamic/dynamicRecomList', data, callback);

        addListeners();
        api.parseTapmode();
        setUserRefreshHeaderInfo(refresh);
    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';

        vm = new Vue({
            el: '#app',
            data: {
                data:[],
                col:5,
                active: 2,
                recomm_list:recomm_list,
                concern_list:{},
                index_state:1,
                telescopic:false,
                telescopic_img:false,
            },

            computed:{
            },

            methods: {
                sowing:function(){
                  api.toast({
                      msg: '暂未开放',
                      duration: 2000,
                      location: 'middle'
                  })
                },
                video:function(){
                  api.toast({
                      msg: '暂未开放',
                      duration: 2000,
                      location: 'middle'
                  });
                },
                telescopic_click:function(){
                    this.telescopic = ! this.telescopic;
                    this.telescopic_img = ! this.telescopic_img;
                },
                // reset(){
                //     this.data = []
                // },
                // switchCol(col){
                //     this.col = col
                //     // console.log(this.col)
                // },
                //
                // loadmore(num){
                //     console.log('loadmore')
                //     setTimeout(function () {
                //         this.data = this.data.concat(this.originData,this.originData)
                //     },1000)
                // },
                showPopup:function(){
                    this.show = true;
                },
                new_load:function(){
                  var data = {
                      member_id: getPrefs('member_id'),
                      page_no: 1,
                      page_size: 30,
                  };
                  var callback = function (ret) {
                    vm.recomm_list = ret.content;
                  };
                  pinet.post(APIURL+'/app/dynamic/dynamicRecomList', data, callback);
                },
                takeaction:function(index){
                  if(!hasPrefs('token')){
                    api.openWin({
                        name: 'login',
                        url: '../login/login.html',
                    });
                    return;
                  }
                  if(this.index_state==1){
                    dynamic_id = this.recomm_list[index].id
                  }else if(this.index_state==2){
                    dynamic_id = this.concern_list[index].id
                  }
                  var data = {
                      member_id: getPrefs('member_id'),
                      dynamic_id: dynamic_id,
                  };

                  var callback = function (ret) {
                    api.toast({
                        msg: ret.message,
                        duration: 2000,
                        location: 'middle'
                    });
                    if(vm.index_state==1){
                      vm.recomm_list[index].praise_flag =vm.recomm_list[index].praise_flag == 0?1:0;
                      var praise_number = vm.recomm_list[index].praise_number;
                      vm.recomm_list[index].praise_number =vm.recomm_list[index].praise_flag == 0?parseInt(praise_number)-1:parseInt(praise_number)+1;
                    }else if(vm.index_state==2){
                    vm.concern_list[index].praise_flag =vm.concern_list[index].praise_flag ==1?0:1;
                    var praise_number = vm.concern_list[index].praise_number;
                    vm.concern_list[index].praise_number =vm.concern_list[index].praise_flag == 0?parseInt(praise_number)-1:parseInt(praise_number)+1;
                    }

                  };
                  pinet.post(APIURL+'/app/dynamic/dynamicPraiseSet', data, callback);
                },
                showreAttentList:function(){

                  var data = {
                      member_id: getPrefs('member_id'),
                      page_no: 1,
                      page_size: 30,
                  };

                  var callback = function (ret) {
                    vm.concern_list = ret.content;
                      console.log(JSON.stringify(vm.concern_list));
                    api.parseTapmode();
                  };
                  pinet.post(APIURL+'/app/dynamic/dynamicAttentList', data, callback);
                },
                show_pick:function(){
                  if(!hasPrefs('token')){
                    api.openWin({
                        name: 'login',
                        url: '../login/login.html',
                    });
                    return;
                  }
                  var data = {
                      member_id: getPrefs('member_id'),
                  };
                  var callback = function (ret) {
                      if(ret.content.length==0){
                        var selectPic = api.require('selectPic');
                        var param = {
                            maxNum : 9 //用户选择的最多图片张数
                        };
                        selectPic.showPics(param, function(ret, err) {
                            var pic_list = ret.data;
                            api.openWin({
                                name: 'publish',
                                url: 'publish.html',
                                pageParam: {
                                    pic_list: pic_list
                                }
                            });
                        });
                      }else{
                        api.confirm({
                            title: '提示',
                            msg: '检测到您有未完成的草稿，是否继续编辑？',
                            buttons: ['确定', '算了']
                        }, function(res, err){
                          if(res.buttonIndex==1){
                            api.openWin({
                                name: 'rubbish',
                                url: './rubbish.html',
                                pageParam: {
                                    infos: ret.content
                                }
                            });
                          }else{
                            var selectPic = api.require('selectPic');
                            var param = {
                                maxNum : 9 //用户选择的最多图片张数
                            };
                            selectPic.showPics(param, function(ret, err) {
                                var pic_list = ret.data;
                                api.openWin({
                                    name: 'publish',
                                    url: 'publish.html',
                                    pageParam: {
                                        pic_list: pic_list
                                    }
                                });
                            });
                          }
                        });

                      }
                  };
                  pinet.post(APIURL+'/app/dynamic/publicDynamicPrefix', data, callback);

                },
                opendetail:function(id){
                  api.openWin({
                      name: 'details',
                      url: './details.html',
                      pageParam: {
                          id: id
                      }
                  });

                },
            },
            mounted: function () {
                this.showreAttentList();
            },
            watch: {
                // index_state: function (newVaL) {
                //     this.showreAttentList();
                // }
            },
        })
    }

    function refresh() {
    if (getPrefs('token')) {
      var data = {
          member_id: getPrefs('member_id'),
          page_no: 1,
          page_size: 30,
      };
      var callback = function (ret) {
        vm.recomm_list = ret.content;
        api.refreshHeaderLoadDone();
      };
      pinet.post(APIURL+'/app/dynamic/dynamicRecomList', data, callback);
    } else {
        api.refreshHeaderLoadDone();
    }

}
    function addListeners() {
      api.addEventListener({
      	name: 'homepage'
      }, function (ret, err) {
      	vm.index_state = ret.value.state;
        if(ret.value.state==1){
          vm.new_load()
        }else if(ret.value.state==2) {
          vm.showreAttentList();
        }
      });
      api.addEventListener({
        name: 'new_load'
      }, function (ret, err) {
        vm.new_load();
        vm.showreAttentList();
      });
      api.addEventListener({
        name: 'switch_to_frame_0'
      }, function (ret, err) {
        vm.new_load();
        vm.showreAttentList();
      });
    }



</script>

</html>
